<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>票据管理系统</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/admin.css">
    <link rel="stylesheet" href="assets/css/app.css">
</head>

<body data-type="generalComponents">
<header class="am-topbar am-topbar-inverse admin-header">
    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">
        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">
            <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                    <span class="tpl-header-list-user-nick">禁言小张</span><span class="tpl-header-list-user-ico"> <img
                        src="assets/img/user01.png"></span>
                </a>
                <ul class="am-dropdown-content">
                    <li><a href="login.html"><span class="am-icon-power-off"></span> 退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
</header>

<div class="tpl-page-container tpl-page-header-fixed">
    <div class="tpl-left-nav tpl-left-nav-hover">
        <div class="tpl-left-nav-list">
            <ul class="tpl-left-nav-menu">
                <li class="tpl-left-nav-item">
                    <a href="javascript:;" class="nav-link tpl-left-nav-link-list ">
                        <i class="am-icon-table"></i>
                        <span>凭证管理</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right tpl-left-nav-more-ico-rotate"></i>
                    </a>
                    <ul class="tpl-left-nav-sub-menu">
                        <li>
                            <a href="transfer-list.html">
                                <i class="am-icon-angle-right"></i>
                                <span>转让列表</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="tpl-left-nav-item">
                    <a href="javascript:;" class="nav-link tpl-left-nav-link-list" active>
                        <i class="am-icon-wpforms"></i>
                        <span>我的凭证</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                    </a>
                    <ul class="tpl-left-nav-sub-menu" style="display:block">
                        <li>
                            <a href="my-ticket-list.html" class="active">
                                <i class="am-icon-angle-right"></i>
                                <span>我的凭证列表</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            我的凭证详情
        </div>
        <ol class="am-breadcrumb">
            <li class="am-active"><a style="color: #999999;">我的凭证</a></li>
            <li class="am-active">我的凭证</li>
            <li class="am-active">我的凭证详情</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    凭证基本信息
                </div>
                <div class="tpl-portlet-input tpl-fz-ml">
                    <div class="portlet-input input-small input-inline">
                        <div class="input-icon right">
                        </div>
                    </div>
                </div>
            </div>

            <div id="detail">

                <div class="tpl-block ">
                    <div class="am-g tpl-amazeui-form">
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">凭证编号</label>
                                    <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{messages.no}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">凭证来源</label>
                                    <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{messages.source}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">开单企业</label>
                                    <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{messages.openEnterprise}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">统一社会信用代码</label>
                                    <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{messages.openSocialUniformCode}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">收单企业</label>
                                    <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{messages.receiveEnterprise}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">统一社会信用代码</label>
                                    <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{messages.receiveSocialUniformCode}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">金融机构</label>
                                    <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{messages.institution}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">凭证金额</label>
                                    <div class="am-u-sm-9" style="font-size: 19px;color: red;font-weight: 500;">
                                        {{messages.amount|numFilter}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">开单日期</label>
                                    <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{messages.openTime|formatDate}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">到期日期</label>
                                    <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">

                                        {{messages.expiryTime|formatDate}}

                                        <span style="font-size: 12px;color: #999">剩余 {{remainDateNumber}} 天</span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">付息方式</label>
                                    <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{messages.paymentInterestType}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">备注</label>
                                    <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{messages.remark}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                        </div>
                    </div>
                </div>

            </div>

            <div style="text-align: center;margin-top:40px">
                <a class="am-btn am-btn-default" href="my-ticket-list.html">返&nbsp;&nbsp;&nbsp;&nbsp; 回</a>
            </div>
        </div>
    </div>
</div>
</body>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/axios.min.js"></script>
<script>
    const ticketDetail = new Vue({
        el: "#detail",
        data: {
            messages: {
                expiryTime: "",
            },
            remainDateNumber: "",
            voucherId: {}
        },
        created() {
            let _this = this
            let start = location.href.lastIndexOf("=");
            let nowId = location.href.substring(start + 1);
            let enterpriseId = JSON.parse(window.sessionStorage.getItem("loginEnterpriseId"));
            console.log("enterprise:" + enterpriseId);
            if (enterpriseId === null) {
                location.href = "login.html";
            }
            axios.get("admin/getVoucherId.mtd?enterpriseId=" + enterpriseId).then(function (response) {
                _this.voucherId = response.data.value
                let flag = false;
                for (let arr in _this.voucherId) {
                    let arrId = _this.voucherId[arr] + '';
                    console.log("bbb:" + arrId)
                    if (nowId === arrId) {
                        flag = true;
                        break;
                    } else {
                        flag = false;
                    }
                    console.log(flag)
                }
                if (flag === false) {
                    location.href = "my-ticket-list.html";
                }
                axios("admin/getMyTicketDetail.mtd?id=" + nowId).then(
                    function (res) {
                        let data = res.data;
                        _this.messages = data.value;
                        axios("admin/remainTime.tdc?expiryTime=" + _this.messages.expiryTime).then(
                            function (response) {
                                let data = response.data;
                                _this.remainDateNumber = data.value;
                            })
                    });
            });
        },
        filters: {
            //处理时间，将传过来变成的时间戳(还不是时间戳，是时间戳减后六位)转化为正常时间格式
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            },
            //处理数字的小数点位数，将传过来的金额数字设置成两位小数
            numFilter: function (value) {
                return parseFloat(value).toFixed(2);
            },
        },
    });
</script>
</html>